import {Component} from "react";
import {View, Image, Text, RichText} from "@tarojs/components";
import './replies.less'
import {myTimeToLocal} from "../../utils/date";
import {validateUser} from "../../actions/user";

const isweapp = process.env.TARO_ENV == "weapp"; //小程序环境

class Replies extends Component{

  admire(reply) {
    // @ts-ignore
    let { user, onAdmire} = this.props;
    validateUser(user).then(result => {
      if (result) {
        onAdmire && onAdmire(reply);
      }
    })
  }

  replyToReply(reply) {
    // @ts-ignore
    let { user, onReplyToReply } = this.props;
    validateUser(user).then(result => {
      if (result) {
        onReplyToReply && onReplyToReply(reply)
      }
    })
  }

  getReplyItem(item: any, index: any) {
    return (
      <View className='topicinfo___repily' key={item.id}>
        <Image className='topicinfo___repily-image' src={item.author ? item.author.avatar_url : ''} />
        <View className='topicinfo___repily-body'>
          <View className='topicinfo___repily-body-pie'>
            <Text className='topicinfo___repily-body-pie-loginname'>{item.author ? item.author.loginname : ''}</Text>
            <Text className='topicinfo___repily-body-pie-floor'>  {(index + 1) + '楼'} ·</Text>
            <Text className='topicinfo___repily-body-pie-time'>{myTimeToLocal(item.create_at)}</Text>
          </View>
          <View className='topicinfo___repily-body-content'>
            {
              isweapp ? <RichText nodes={item.content} /> : <View dangerouslySetInnerHTML={{__html: item.content}} />
            }
          </View>
        </View>
        <View className='topicinfo___repily-zan'>
          <Image
            onClick={()=>this.admire(item)}
            className='topicinfo___repily-zan-image'
            src={item.is_uped ? require('../../assets/img/myzan.png') : require('../../assets/img/zan.png')}
          />
          <Text>{item.ups.length}</Text>
          <Image
            onClick={()=>this.replyToReply(item)}
            className='topicinfo___repily-zan-image'
            src={require('../../assets/img/zhuan.png')}
          />
        </View>
      </View>
    );
  }

  render() {
    // @ts-ignore
    const {replies} = this.props;
    return (
      <View className='topicinfo___replies'>
        {
          replies&&replies.map((item, index)=>{
            return this.getReplyItem(item, index);
          })
        }
      </View>
    );
  }
}
export default Replies;
